<template>
  <div class="app-container" >
    <div class="choose_box pr" :class="screen_box_bl?'choose_box2':''" ref="choose_box">
      <div class="search_box fl">
        <div class="fl screen_input">
          <input type="text" placeholder="输入关键字搜索" v-model="search_val" @keyup.enter="search()"/>
          <img src="@/assets/images/tx_answer/accessRecord/sousuo.png" @click="search()"/>
          <i title="清空" class="clear_input" style="right:48px;" v-show="search_val" @click="search_val='',search()"></i>
          <i class="clear_input_icon" v-show="search_val"></i>
        </div>
        <a href="javascript:;" ondragstart="return false;" class="fl screen_btn" @click="screen_but_click()">
          筛选
        </a>
      </div>
      <div class="date_box cf">
        <div class="reduce_month fl" @click="reduce_time()">&nbsp;</div>
        <div class="fl date_main">
          <el-date-picker
            class="top_time fl"
            v-model="top_date"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy年MM月dd日"
            :editable="false"
            popper-class="top_time_select1"
            :picker-options="date_range"
            @change="change_day()"
          >
          </el-date-picker>
        </div>
        <div class="fl add_month" @click="add_time()" :class="top_date==cur_date?'add_month_no cursorNot':''">&nbsp;
        </div>
      </div>
      <div class="fr left_nav_tab cf">
        <span class="fl" :class="searchFlg=='00'?'cur':''"
              @click="searchFlg='00',orderbyparam='00',orderbyflg='00',search()">全部</span>
        <span class="fl" :class="searchFlg=='01'?'cur':''"
              @click="searchFlg='01',orderbyparam='00',orderbyflg='00',search()">已登录{{UserTotalNum.loginUserNum?UserTotalNum.loginUserNum:''}}</span>
        <span class="fl" :class="searchFlg=='02'?'cur':''"
              @click="searchFlg='02',orderbyparam='',orderbyflg='00',search()">未登录{{UserTotalNum.unLoginUserNum?UserTotalNum.unLoginUserNum:''}}</span>
      </div>
    </div>
    <div class="screen_details" v-if="screen_box_bl">
      <i class="sanjiao_icon" style="left: 268px;"></i>
      <div class="screen_box">
        <div class="screen_box_right cf">
          <div class="fl cf">
            <template>
              <label class="fl">部门：</label>
              <strong class="fl pr box_wrap">
                <currency-check :json-list="department_screen_json" ref="department_screen_json_top" reference="01"
                                @check_sub="check_sub" key="department_screen_json_top"></currency-check>
              </strong>
            </template>
          </div>
          <div class="fl cf">
            <template>
              <label class="fl">工作城市：</label>
              <strong class="fl pr box_wrap">
                <currency-check :json-list="city_screen_json" ref="city_screen_json_top" reference="01"
                                @check_sub="check_sub" key="city_screen_json_top"></currency-check>
                <!-- <el-popover
                  popper-class="el_project"
                placement="bottom"
                width="200"
                trigger="click"
                @hide="clear_city()"
                @show="show_city()"
                v-model="table_th_choose_model.city">
              <span slot="reference" onselectstart ='return false' :class="city?'pr box_cont cp':'pr box_cont cp color_gray'" :title="city?city:''">
                <template v-if="city">
                  <template v-if="city.split(',').length>1">
                    {{city.split(',')[0]}}...
                  </template>
                  <template v-else>
                    {{city.split(',')[0]}}
                  </template>
                </template>
                <template v-else>
                  请选择
                </template>
                <img v-if="!city" src="/image/admin/xiala_sanjiao.png" class="table_icon" style="width:7px;height:5px;z-index:1;" />
              </span>
               <div class="project_choose_box">
                <ul>
                  <li class="cf" v-if="city_list.length" @click="screen_all_click('city_list','city_list_all','name','','city2','')" :class="city_list_all?'active':''">
                    <span class="fl">全部</span>
                      <i class="fr"></i>
                  </li>
                  <template v-for="(item,index) in city_list">
                      <li :class="item.check=='01'?'active cf':'cf'" @click="check_city(index)" :title="item.name">
                        <span class="fl">{{item.name}}</span>
                        <i class="fr"></i>
                      </li>
                  </template>
                </ul>
                <div class="save_choose_box">
                  <a ondragstart="return false;" href="javascript:;" @click="save_choose_city('01')">确定</a>
                </div>
               </div>
              </el-popover>
              <img v-if="city" @click="city='',search()" src="/image/admin/3_30_qingchu_tiaojian.png" title="移除该条件" /> -->
              </strong>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="content" v-loading="loading">
      <div class="table_box">
        <el-table :data="table_data" style="width: 100%" :key="1" :height="table_height">
          <template v-slot:empty>
            <template v-if="loading">
              {{'\u3000'}}
            </template>
            <template v-else>
              <empty-show :content="'暂无数据'"></empty-show>
            </template>
          </template>
          <el-table-column prop="" label="员工号" width="80" height="40" :resizable="false">
            <template slot-scope="scope">
              <span class="dan">{{scope.row.staffnum?scope.row.staffnum:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="姓名" width="80" height="40" :resizable="false">
            <template slot-scope="scope">
<!--              <span class="dan color-bl hand" @click="go_staffStudyDetails(scope.row)">{{scope.row.renames?scope.row.renames:scope.row.uname}}</span>-->
              <text-overflow :textValNum="scope.row.renames&&scope.row.renames.length" :defaultsNum="5" :textValOne="scope.row.renames&&scope.row.renames" :className="'color-bl cp'" isClick @newClick="go_staffStudyDetails(scope.row)"></text-overflow>
            </template>
          </el-table-column>
          <el-table-column prop="" label="职位" min-width="126" height="40" :resizable="false">
            <template slot-scope="scope">
<!--              <span class="dan">{{scope.row.postname?scope.row.postname:'-'}}</span>-->
              <text-overflow :textValNum="scope.row.postname&&scope.row.postname.length" :defaultsNum="11" :textValOne="scope.row.postname&&scope.row.postname"  ></text-overflow>
            </template>
          </el-table-column>
          <el-table-column prop="" label="入职" min-width="100" height="40" :resizable="false">
            <template slot-scope="scope">
              <span class="dan">{{scope.row.salary_days?scope.row.salary_days+'天':'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="100" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='00'?'color-bl':''" @click="table_th_choose('00')">
                <span>登录</span>
                <em>
                  <img
                    :src="orderbyparam=='00'&&orderbyflg=='01'?require('@/assets/images/tx_answer/accessRecord/xiala_g.png'):require('@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="orderbyparam=='00'&&orderbyflg=='00'?require('@/assets/images/tx_answer/accessRecord/xiala_g.png'):require('@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
                <!--                                    <img-->
                <!--                                      src="@/assets/images/tx_answer/accessRecord/xiala_g.png"-->
                <!--                                      width="7">-->


              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.loginTime?getDateDiff(scope.row.loginTime):'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="120" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='01'?'color-bl':''" @click="table_th_choose('01')">
                <span>时长</span>
                <em>
                  <img
                    :src="require(orderbyparam=='01'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='01'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.duration?formatSecToDate(scope.row.duration):'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='02'?'color-bl':''" @click="table_th_choose('02')">
                <span>知识点</span>
                <em>
                  <img
                    :src="require(orderbyparam=='02'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='02'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.pointReadNum?scope.row.pointReadNum:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='03'?'color-bl':''" @click="table_th_choose('03')">
                <span>视频</span>
                <em>
                  <img
                    :src="require(orderbyparam=='03'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='03'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.videoReadNum?scope.row.videoReadNum:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='04'?'color-bl':''" @click="table_th_choose('04')">
                <span>文档</span>
                <em>
                  <img
                    :src="require(orderbyparam=='04'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='04'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.picReadNum?scope.row.picReadNum:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='05'?'color-bl':''" @click="table_th_choose('05')">
                <span>实操</span>
                <em>
                  <img
                    :src="require(orderbyparam=='05'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='05'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.operReadNum?scope.row.operReadNum:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='07'?'color-bl':''" @click="table_th_choose('07')">
                <span>写评论</span>
                <em>
                  <img
                    :src="require(orderbyparam=='07'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='07'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.cmntNum?scope.row.cmntNum:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp" :class="orderbyparam=='08'?'color-bl':''" @click="table_th_choose('08')">
                <span>新发布</span>
                <em>
                  <img
                    :src="require(orderbyparam=='08'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='08'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.newSubmitNum?scope.row.newSubmitNum:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp table_th_bg" :class="orderbyparam=='11'?'color-bl':''"
                   @click="table_th_choose('11')">
                <span>总时长</span>
                <em>
                  <img
                    :src="require(orderbyparam=='11'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='11'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.totalDuration_?scope.row.totalDuration_:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp table_th_bg" :class="orderbyparam=='14'?'color-bl':''"
                   @click="table_th_choose('14')">
                <span>web</span>
                <em>
                  <img
                    :src="require(orderbyparam=='14'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='14'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.webappDuration_?scope.row.webappDuration_:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp table_th_bg" :class="orderbyparam=='13'?'color-bl':''"
                   @click="table_th_choose('13')">
                <span>小程序</span>
                <em>
                  <img
                    :src="require(orderbyparam=='13'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='13'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.miniappDuration_?scope.row.miniappDuration_:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="" min-width="80" height="40" :resizable="false">
            <template slot="header" slot-scope="scope">
              <div class="sort_style_box cp table_th_bg" :class="orderbyparam=='12'?'color-bl':''"
                   @click="table_th_choose('12')">
                <span>APP</span>
                <em>
                  <img
                    :src="require(orderbyparam=='12'&&orderbyflg=='01'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                  <img
                    :src="require(orderbyparam=='12'&&orderbyflg=='00'?'@/assets/images/tx_answer/accessRecord/xiala_g.png':'@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png')"
                    width="7">
                </em>
              </div>
            </template>
            <template slot-scope="scope">
              <span class="dan">{{scope.row.appDuration_?scope.row.appDuration_:'-'}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column  prop="" label="" min-width="0" height="40" :resizable="false">
          </el-table-column>	 -->
        </el-table>
      </div>
    </div>
    <div class="cf table_page" v-show="table_data.length>0" v-cloak ref="page_box">
      <div class="fl">
        <el-pagination
          background
          layout="prev, pager, next,sizes,total"
          :page-count.sync="page"
          :current-page.sync="page"
          @current-change="current_change"
          @size-change="page_change"
          :page-sizes="table_size_arr"
          :page-size="page_size"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>


<script>

  import { getCommonData } from '@/api/tx_answer/common'
  import CurrencyCheck from '@/components/CurrencyCheck'
  import SearchInput from '@/components/common/SearchInput'
  import EmptyShow from '@/components/EmptyShow'
  import TextOverflow from '@/components/TextOverflow'

  var _this
  var authId
  var tips_settimeout

  export default {
    name: 'ProjectList',
    components: {
      'currency-check': CurrencyCheck,
      'search-input': SearchInput,
      'empty-show': EmptyShow,
      'text-overflow': TextOverflow
    },
    data() {
      return {
        authId: authId,
        companyid: '',
        type: '01',//01 hr  02 城市  03职位
        timeflg: '00',//00日 01周 02月

        orderbyparam: '00',//00登录时间； 01时长； 02知识点 03视频 04文档 05实操 06考题 07写评论 08新发布 09领任务 10交任务 默认00
        orderbyflg: '00',//00 倒序 01正序 默认00
        searchFlg: '00',//00全部 01已登录 02未登录 默认00
        starttime: '',
        endtime: '',
        loading: false,

        top_date: '',
        table_height: 800,
        table_data: [],
        table_size_arr: [10, 15, 20, 25, 30, 35, 40],
        page_size: 15,//每页个数
        page: 1,//当前页码
        total: 0,
        is_city_all: false,//是否全选
        week_start: '',
        week_end: '',
        analysis_data: {},
        date_range: {},
        search_val: '',
        UserTotalNum: {
          loginUserNum: 0,
          totalUserNum: 0,
          unLoginUserNum: 0
        },
        // 筛选
        screen_box_bl: false,
        table_th_choose_model: {},
        // 部门
        department_list_all: false,
        department_list: [],
        department_id: '',
        department_id2: [],
        department_name: '',
        department_name2: [],
        // 项目
        project_list_all: false,
        project_list: [],
        project_id: '',//项目筛选id
        project_name: '',//项目筛选名称
        project_id2: [],//项目筛选id存储
        project_name2: [],//项目筛选名称存储
        // 城市
        city_list_all: false,
        city_list: [],
        city: '',//城市筛选
        city2: [],//城市筛选

        department_screen_json: {
          json_name: 'department_screen_json',
          filter_name: '部门',
          screen_box: true,//是否需要搜索框
          ajax_obj: {
            url: '/web/findComDeptList',
            data: {
              authId: authId
            },
            screen_key: '',
            type: 'GET',
            data_type: '01',//00 value直接取arr[i]; 01 value需要取id或者其他；
            label_name: 'deptname',
            value_name: 'deptid'
          },
          data: {}//接口获取的数据或者选中的数据都放在里面
        },
        city_screen_json: {
          json_name: 'city_screen_json',
          filter_name: '城市',
          screen_box: true,//是否需要搜索框
          ajax_obj: {
            url: '/web/webHRDutySelectCity',
            data: {
              authId: authId
            },
            screen_key: '',
            type: 'POST',
            data_type: '00',//00 value直接取arr[i]; 01 value需要取id或者其他；
            label_name: '',
            value_name: ''
          },
          data: {}//接口获取的数据或者选中的数据都放在里面
        }
      }
    },
    created: function() { //html加载完成之前
      _this = this
      _this.authId = _this.$cache.session.get('authId')
      _this.companyid = _this.$cache.session.get('admin_companyid')
      _this.cur_date = _this.$cache.session.get('cur_date')
      var cur_date = this.cur_date.replace(/-/g, '/')
      this.top_date = this.cur_date
      this.date_range = {
        disabledDate: function(time) {
          return time.getTime() > new Date(cur_date).getTime()
        }
      }
      sessionStorage.setItem('answer_left_current_index', 0)
    },
    mounted: function() { //页面加载时
      _this = this
      sessionStorage.setItem('answer_current_url', '/access')
      _this.page_size_plus(143, 41)//表格减去的高度 td高度
      var access_records_ajax_data = sessionStorage.getItem('access_records_ajax_data')
      if (access_records_ajax_data && access_records_ajax_data != 'null') {
        access_records_ajax_data = JSON.parse(access_records_ajax_data)
        _this.page = access_records_ajax_data.current
      }
      _this.get_list()
      window.onresize = function() {
        _this.tabel_height_onsize()
      }
    },

    methods: {
      //获取表格每页多少和页数的数组
      page_size_plus: function(num, td_h) {//根据分辨率显示
        let win_h = document.body.clientHeight//网页可见高度
        let tabel_size = Math.ceil((win_h - num) / td_h) - 1
        let tabel_size_bl = true
        for (let i = 0; i < _this.table_size_arr.length; i++) {
          if (_this.table_size_arr[i] == tabel_size) {
            tabel_size_bl = false
          }
        }
        if (tabel_size_bl) {
          _this.table_size_arr.unshift(tabel_size)
          _this.table_size_arr.sort(function(a, b) {
            return a - b
          })
        }
        _this.table_size = tabel_size
        _this.page_size = tabel_size
      },
      get_list: function() {//获取列表
        _this.loading = true
        var ajax_url = '/web/webGetTSDUserTotalList'
        var ajax_type = 'post'
        var ajax_data = {
          'authId': _this.authId,
          'companyid': _this.companyid,
          'current': _this.page,
          'size': _this.page_size,
          'searchDateTimeStr': _this.top_date + ' 00:00:00',
          'searchFlg': _this.searchFlg,
          'searchNameKey': _this.search_val,
          'sortFlg': _this.orderbyflg,
          'sortType': _this.orderbyparam,
          'deptids': _this.department_screen_json.data.value_str,
          // "projectids":_this.project_id,
          'workaddress': _this.city_screen_json.data.value_str
        }
        sessionStorage.setItem('access_records_ajax_data', JSON.stringify(ajax_data))
        getCommonData(ajax_url, ajax_data, ajax_type).then(data => {
          _this.get_num()
          console.log(data)
          _this.table_data = []
          _this.total = 0
          if (data.success) {
            _this.table_data = data.data.page.records
            _this.total = data.data.page.total
            for (var i = 0; i < _this.table_data.length; i++) {
              var item = _this.table_data[i]
              if (_this.table_data[i].salarytime) {
                var days = _this.getdiffdate(_this.table_data[i].salarytime, _this.cur_date).length
                _this.$set(_this.table_data[i], 'salary_days', days)
              } else {
                _this.$set(_this.table_data[i], 'salary_days', 0)
              }
              _this.$set(item, 'totalDuration_', _this.get_duration(item.totalDuration))//总时长
              _this.$set(item, 'webappDuration_', _this.get_duration(item.webappDuration))//web
              _this.$set(item, 'miniappDuration_', _this.get_duration(item.miniappDuration))//小程序
              _this.$set(item, 'appDuration_', _this.get_duration(item.appDuration))//APP
            }
            setTimeout(function() {
              _this.tabel_height_onsize()
            }, 1)
          } else {
            if (data.code == '703') {
              _this.get_list()
            }
          }
          _this.loading = false

        })
      },
      go_staffStudyDetails: function(row) {
        sessionStorage.setItem('admin_staffStudyDetails_json', JSON.stringify(row))
        _this.$router.push({
          path: '/access/staffStudy/detail',
          query: {
            date: new Date().getTime()
          }
        })
      },
      get_num: function(time) {
        var ajax_url = '/web/webGetTSDUserTotalNum'
        var ajax_type = 'post'
        var ajax_data = {
          'authId': _this.authId,
          'searchDateTimeStr': _this.top_date + ' 00:00:00'
        }
        getCommonData(ajax_url, ajax_data, ajax_type).then(data => {
          console.log(data)
          if (data.success) {
            _this.UserTotalNum.loginUserNum = data.data.loginUserNum
            _this.UserTotalNum.totalUserNum = data.data.totalUserNum
            _this.UserTotalNum.unLoginUserNum = data.data.unLoginUserNum
          }
        })
      },
      getdiffdate: function(stime, etime) {//获取两个日期之间的日期
        //初始化日期列表，数组
        var diffdate = new Array()
        var i = 0
        //开始日期小于等于结束日期,并循环
        while (stime <= etime) {
          diffdate[i] = stime
          //获取开始日期时间戳
          var stime_ts = new Date(stime).getTime()
          //增加一天时间戳后的日期
          var next_date = stime_ts + (24 * 60 * 60 * 1000)
          //拼接年月日，这里的月份会返回（0-11），所以要+1
          var next_dates_y = new Date(next_date).getFullYear() + '-'
          var next_dates_m = (new Date(next_date).getMonth() + 1 < 10) ? '0' + (new Date(next_date).getMonth() + 1) + '-' : (new Date(next_date).getMonth() + 1) + '-'
          var next_dates_d = (new Date(next_date).getDate() < 10) ? '0' + new Date(next_date).getDate() : new Date(next_date).getDate()
          stime = next_dates_y + next_dates_m + next_dates_d
          //增加数组key
          i++
        }
        return diffdate
      },
      tabel_height_onsize: function() {//计算表格显示高度
        setTimeout(function() {
          // var all_h = _this.$refs.choose_box.offsetHeight + _this.$refs.page_box.offsetHeight + 50;
          var all_h = 155
          if (_this.screen_box_bl) {
            all_h = 214
          }
          _this.table_height = document.body.offsetHeight - all_h
        })
      },
      table_th_choose: function(type) {
        if (type == _this.orderbyparam) {
          if (_this.orderbyflg == '00') {
            _this.orderbyflg = '01'
          } else {
            // _this.orderbyparam = '';
            _this.orderbyflg = '00'
          }
        } else {
          _this.orderbyparam = type
          _this.orderbyflg = '00'
        }
        _this.search()
      },
      getFirstDayOfWeek: function(dd) {
        var dd = new Date(Date.parse(dd.replace(/-/g, '/')))
        var week = dd.getDay() //获取时间的星期数
        var minus = week ? week - 1 : 6
        dd.setDate(dd.getDate() - minus) //获取minus天前的日期
        var y = dd.getFullYear()
        var m = dd.getMonth() + 1 //获取月份
        var d = dd.getDate()
        return y + '-' + m + '-' + d
      },
      change_day: function() {
        _this.search()
      },
      search: function() {//搜索
        _this.page = 1
        _this.get_list()
      },
      current_change: function(page) {//分页切换
        _this.page = page
        _this.get_list()
      },
      page_change: function(val) {
        _this.page_size = val
        _this.search()
      },
      add_time: function() {
        if (_this.top_date == _this.cur_date) {
          return
        }
        _this.top_date = _this.getNextDate(_this.top_date, 1)
        _this.search()
      },
      reduce_time: function() {
        _this.top_date = _this.getNextDate(_this.top_date, -1)
        _this.search()
      },

      getNextDate: function(date, day) {
        if (typeof (date) == 'string') {
          var dd = new Date(date.replace(/-/g, '/'))
        } else {
          var dd = new Date(date)
        }
        dd.setDate(dd.getDate() + day)
        var y = dd.getFullYear()
        var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
        var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
        return y + '-' + m + '-' + d
      },
      tips_show: function(text) {//提示框
        var that = this
        that.tips_text = text
        that.tips_bl = true
        clearTimeout(tips_settimeout)
        tips_settimeout = setTimeout(function() {
          that.tips_bl = false
        }, 2500)
      },
      addMonth: function(d, m) {//根据时间添加月份
        var ds = d.split('-'), _d = ds[2] - 0
        var nextM = new Date(ds[0], ds[1] - 1 + m + 1)
        var max = nextM.getDate()
        d = new Date(ds[0], ds[1] - 1 + m)
        var year = d.getFullYear()
        var month = d.getMonth() + 1
        if (month < 10) {
          var month = '0' + month
        }
        return year + '-' + month + '-01'
      },
      table_layer_hide: function(item) {
        $('body').trigger('click')
      },
      formatSecToDate: function(sec) {
        if (!sec) {
          return '-'
        }
        var min = Math.floor(sec % 3600)//分钟
        return Math.floor(sec / 3600) + '时' + Math.floor(min / 60) + '分'
      },
      getDateDiff: function(dateTimeStamp) {//仿微信朋友圈发表时间
        var minute = 1000 * 60
        var hour = minute * 60
        var day = hour * 24
        var halfamonth = day * 15
        var month = day * 30
        //若你得到的时间格式不是时间戳，可以使用下面的JavaScript函数把字符串转换为时间戳, 本函数的功能相当于JS版的strtotime：
        var idata = Date.parse(dateTimeStamp.replace(/-/gi, '/'))  //js函数代码：字符串转换为时间
        var now = new Date().getTime()
        var diffValue = now - idata
        if (diffValue < 0) {
          //若日期不符则弹出窗口告之
          //alert("结束日期不能小于开始日期！");
        }
        var monthC = diffValue / month
        var weekC = diffValue / (7 * day)
        var dayC = diffValue / day
        var hourC = diffValue / hour
        var minC = diffValue / minute
        var result = ''
        if (monthC >= 1) {
          result = dateTimeStamp
        } else if (weekC >= 1) {
          result = parseInt(weekC) + '周前'
        } else if (dayC >= 1) {
          result = parseInt(dayC) + '天前'
        } else if (hourC >= 1) {
          result = parseInt(hourC) + '小时前'
        } else if (minC >= 1) {
          result = parseInt(minC) + '分钟前'
        } else {
          result = '刚刚'
        }
        return result
      },
      // 筛选按钮
      screen_but_click: function() {
        _this.screen_box_bl = !_this.screen_box_bl
        _this.tabel_height_onsize()
      },
      // 筛选
      // 组件筛选通用
      check_sub: function(json_list) {//复选确认
        _this[json_list.json_name].data = json_list
        if (json_list.get_list_flg == '01') {//点击确认或者筛选，需要进行搜索
          _this.search()
          setTimeout(function() {
            _this.all_hide()
          })
        }
      }
    }
  }
</script>

<style scoped>
  body {
    overflow: hidden;
    height: 100vh;
  }

  .app-container {
    background-color: #ffffff;
    height: 100%;
  }

  .color-bl {
    color: #1CBECC !important;
  }

  .color_green {
    color: #20B3C9 !important;
  }

  .color_gray {
    color: #9EA7C0 !important;
  }

  .color_red {
    color: #F95355 !important;
  }

  .color_black {
    color: #354168 !important;
  }

  .color_orange {
    color: #FF7540 !important;
  }

  .text_left {
    text-align: left;
  }

  .bg_gray {
    background-color: #CFD4DB !important;
  }

  .dan {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
  }

  .top_box {
    padding: 0 20px;
    height: 50px;
    background-color: #fff;
    color: #21263f;
    font-size: 16px
  }

  .top_box h1.top_title {
    height: 50px;
    color: #354168;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 50px;
    margin-left: 88px;
  }

  .back_btn {
    position: absolute;
    top: 8px;
    left: 20px;
    box-sizing: border-box;
    padding-left: 28px;
    width: 69px;
    height: 34px;
    border: 1px solid #dddee1;
    border-radius: 2px;
    background: url(~@/assets/images/tx_answer/accessRecord/fanhui.png) no-repeat 13px center;
    background-size: 8px 15px;
    color: #354168;
    text-align: left;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer
  }

  .content {
    margin: 0 20px 0;
  }

  .right_nav_tab span {
    height: 35px;
    line-height: 35px;
    border: 1px solid #DDDDDD;
    border-bottom: 0;
    margin-top: 14px;
    margin-left: 10px;
    width: 90px;
    text-align: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 14px;
    color: #617099;
    background-color: #fff;
    cursor: pointer;
  }

  .right_nav_tab span.cur {
    color: #1890FF;
    background-color: #F1F6F8;
  }

  .choose_box {
    height: 30px;
    padding: 16px 20px;
  }

  .choose_box2 {
    padding-bottom: 0;
  }

  .left_nav_tab span {
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    font-size: 12px;
    color: #617099;
    text-align: center;
    border-left: 0;
    min-width: 60px;
    cursor: pointer;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .left_nav_tab span.cur {
    background-color: #1CBECC;;
    color: #fff;
    height: 30px;
    line-height: 30px;
    border: 0;
  }

  .left_nav_tab span:first-child {
    border-left: 1px solid #ddd;
    border-radius: 2px 0 0 2px;
  }

  .left_nav_tab span:last-child {
    border-radius: 0 2px 2px 0;
  }

  .user_num {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #354168;
  }

  .date_box {
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    height: 30px;
  }

  .reduce_month, .add_month, .add_month_no, .reduce_month_no {
    margin-top: 7px;
  }

  /deep/ .top_time {
    float: left !important;
    height: 30px !important;
    width: 93px !important;
  }

  /deep/ .top_time_week {
    width: 148px;
  }

  /deep/ .top_time_month {
    width: 68px;
  }

  /deep/ .top_time input {
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 0;
    border: 0;
    color: #354168;
    font-size: 12px;
    line-height: normal;
    cursor: pointer;
    background-color: transparent;
    position: relative;
  }

  /deep/ .top_time .el-input__prefix, /deep/ .top_time .el-input__suffix {
    display: none;
  }

  .date_main {
    margin-left: 8px;
    margin-right: 6px;
  }


  /deep/ .el-table__header-wrapper {
    background-color: #e2eaf5
  }

  .table_icon {
    width: 7px;
    height: 5px;
    margin-left: 4px;
    vertical-align: middle;
  }

  .table_box table tr td, .table_box table tr th {
    background-color: #fff !important;
    height: 45px;
    padding: 0 !important;
    font-size: 12px;
    text-align: center;
    color: #354168;
  }

  /*.table_box table tr:nth-child(2n) td{background-color:#fafafa!important}*/
  .table_box table tr th {
    color: #617099;
    font-weight: 700;
    background-color: #F5F5F5 !important
  }

  .table_box table .cell {
    padding: 0 !important;
  }

  .table_box .el-table__body tr.hover-row td {
    background-color: #F5F7FA !important;
  }

  .sort_style_box em img {
    width: 7px;
    height: 5px;
    display: block;
  }

  .sort_style_box em img:first-child {
    margin-bottom: 2px;
    margin-top: 5px;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
  }

  .sort_style_box em {
    height: 16px;
    display: inline-block;
    vertical-align: baseline;
  }

  .table_th_bg {
    background-color: rgba(255, 151, 0, .06);
  }

  /*表格筛选处*/
  /deep/ .screen_box .screen_box_left {
    font-size: 12px;
    color: #617099;
    width: 37px;
    height: 22px;
    line-height: 22px;
  }

  /deep/ .screen_box .entry_time {
    height: 22px;
    box-sizing: border-box;
    background: #FAFAFA;
    border: 1px solid #DDDDDD;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 5px;
    color: #617099;
  }

  /deep/ .screen_box label {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #9EA7C0;;
    margin-right: 5px;
  }

  /deep/ .screen_box span.color_gray {
    color: #bbb !important;
  }

  /deep/ .screen_box strong.box_wrap {
    margin-right: 23px;
    font-weight: normal;
  }

  /deep/ .screen_box span.box_cont {
    height: 20px;
    line-height: 20px;
    border: 1px solid #ddd;
    background: #FAFAFA;
    padding-left: 10px;
    padding-right: 24px;
    font-size: 12px;
    color: #617099;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    display: block;
    cursor: pointer;
  }

  /deep/ .screen_box strong.box_wrap img, /deep/ .screen_box span.box_cont img {
    width: 8px;
    height: 8px;
    position: absolute;
    right: 7px;
    top: 7px;
    cursor: pointer;
    z-index: 3;
  }

  /deep/ .screen_box_right > div {
    height: 24px;
    overflow: hidden;
  }


  .table_icon {
    width: 7px;
    height: 5px;
    margin-left: 4px;
    vertical-align: middle;
  }

  .sanjiao_icon {
    width: 16px;
    height: 8px;
    background-color: #fff;
    position: absolute;
    transform: rotate(45deg);
    top: -2px;
  }

  /*筛选框大框样式*/
  .screen_details {
    padding: 14px 16px;
    margin: 0 20px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
    border-radius: 2px;
    background-color: #fff;
    font-size: 12px;
    position: relative;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .screen_input {
    width: 240px;
    position: relative;
    height: 30px
  }

  .screen_input input {
    width: 100%;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    padding: 0 10px;
    padding-right: 40px;
    font-size: 12px;
    display: block;
    box-sizing: border-box;
  }

  .screen_input img {
    width: 17px;
    height: 17px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -8px;
    cursor: pointer
  }

  .search_box .screen_btn {
    width: 46px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: #333;
    text-align: center;
    background-color: #fff;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 10px;
    border: 1px solid #DDDEE1;
  }

  .table_page {
    /*margin: 5px 0;*/
  }
</style>
